﻿<meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />
<style type="text/css">
    #documents_select_file .k-upload-files{display: none;}
    #documents_select_file .k-file{display: none;}

    /*kendo upload*/
    #documents_select_file .k-button{min-width:0; width:45px; padding:0;margin:0;}
    #documents_select_file .k-upload-button{background-color: #6cbf43!important;float:right;}
    #documents_select_file .k-upload-button-disable{background-color: #f4f4f4!important;float:right;color:#b7b7b7;}
    #documents_select_file .k-upload-button span{height:17px; line-height:17px; font-size:9px;}

    #documents_select_file .k-upload-files{clear:both; min-height:41px;display: none; padding-top:10px;}
    #documents_select_file .k-upload-files li{min-width:42px; max-width:42px; padding:0; border:none; float:left; margin-right:12px; font-size:12px; height:48px;}

    #documents_select_file .k-upload-status{left:16px; top:-3px; line-height:0;}
    #documents_select_file .k-upload-status span{background:url("imgs/delete.png") no-repeat;overflow:visible;}

    #documents_select_file .k-i-pdf{height:40px; width:40px; background:url("imgs/pdfIcon40.png") no-repeat!important; display: block; }
    #documents_select_file .k-i-txt{height:40px; width:40px; background:url("imgs/txt40.png") no-repeat!important; display: block; }
    #documents_select_file .k-i-doc, .k-i-docx {height:40px; width:40px; background:url("imgs/docIcon40.png") no-repeat!important; display: block; }
    #documents_select_file .k-i-xls, .k-i-xlsx {height:40px; width:40px; background:url("imgs/xlsIcon40.png") no-repeat!important; display: block; }
    #documents_select_file .k-i-ppt, .k-i-pptx {height:40px; width:40px; background:url("imgs/ppt40.png") no-repeat!important; display: block; }
    #documents_select_file .k-i-zip{height:40px; width:40px; background:url("imgs/zip40.png") no-repeat!important; display: block; }
    #documents_select_file .k-i-jpeg, .k-i-jpg, .k-i-png, .k-i-gif, .k-i-bmp, .k-i-tiff, .k-i-tif {height:40px; width:40px; background:url("imgs/img40.png") no-repeat!important; display: block; }

    #documents_body_min li{
        cursor: pointer;
        list-style: none;
        width: 15px;
        font-size: 14px;
    }
    #documents_body_min span{
        font-size: 12px;
    }
    #documents_menubar_max_list .k-icon{
        width: 12px;
    }
    #documents_body_max li{
        cursor: pointer;
        list-style: none;
        width: 15px;
        font-size: 14px;
    }
    #documents_body_max span{
        font-size: 12px;
    }
    #documents_menubar_max_list li{
        font-size: 10px;text-align: center; float: left;
    }
    #documents_menubar_min_list li{
        font-size: 10px;
    }
    .documents_panel{border-right: 1px solid #EFEFEF;  float: left;  }
    #documents_panel_functions{width: 100%; background-color: #E6E6E6; }
    .documents_panel_top{color:white; text-align: center; background-color: #CCCCCC; color: #595959; line-height: 20px;}
    .documents_panel_body{background-color: #E6E6E6; height: 100%;}

    .documents_panel_list_item_three{float:left;width: 235px; height: 60px;}
    .documents_panel_list_item_three_image{top:0px; float: left; margin-top: 4px;}
    .documents_panel_list_item_three_title{left: 15px; top:0px; width: 160px; overflow: hidden; position: relative; font-size: 12px;text-align: left;}
    .documents_panel_list_item_three_time{left: 15px; top: 1px; width: 160px; overflow: hidden; position: relative; font-size: 12px;text-align: left}
    .documents_panel_list_item_three_author{left: 15px; top: 1px; width: 160px; overflow: hidden; position: relative; font-size: 9px;text-align: left}

    .documents_panel_list_item_four{float:left;width: 178px; height: 60px;}
    .documents_panel_list_item_four_image{float: left; margin-top: 4px;}
    .documents_panel_list_item_four_title{left: 15px; top:0px; width: 130px; position: relative; font-size: 12px;text-align: left}
    .documents_panel_list_item_four_time{left: 15px; top: 0px;position: relative; font-size: 12px;text-align: left}
    .documents_panel_list_item_four_author{left: 15px; top: 0px; width: 130px; position: relative; font-size: 12px;text-align: left}

    .documents_max_communities_list_item {margin-top: 4px; height: 65px;position: relative;}
    .documents_max_communities_list_item_thumbnail {float: left; width: 45px;height: 45px; margin-top: 12px;}
    .documents_max_communities_list_item_communityname{margin-left: 60px; margin-top: 12px; font-size: 14px;text-align: left}
    .documents_max_communities_list_item_time{left: 15px; margin-top: 1px;position: relative; font-size: 12px;text-align: left}
    .documents_max_communities_list_item_filecount{margin-left: 60px; margin-top: 1px;font-size: 12px;text-align: left}
    .documents_max_communities_list_item_moreorless{height: 15px; position: relative; font-size: 12px; text-align: right;}

    .documents_panel_min_list_image {float: left; margin-top: 4px;}
    .documents_panel_min_list_title {left: 15px; top:0px; max-width: 150px; position: relative; font-size: 12px;text-align: left}
    .documents_panel_min_list_time {left: 15px; top: 1px;position: relative; font-size: 12px;text-align: left}
    .documents_panel_min_list_author {left: 15px; top: 1px; width: 150px; position: relative; font-size: 12px;text-align: left}

    .documents_pane_min_list_item{width:240px; height: 60px; vertical-align: top;}
    .documents_pane_max_list_item{width: 750px;height: 60px}

    .documents_click_able {cursor:pointer;}
    #documents_body_max_search .k-i-calendar{display: none;}
    #documents_body_max_search .k-select{width: 100%;}
    #documents_menubar_max_list .k-link {text-align: center; width: initial; min-width: 85px;}
    #documents_menubar_min_list  .k-i-arrow-s{display: none;}

    .documents_list_index .slimScrollDiv{float: left;}
    .documents_list_index .slimScrollDiv{float: left;}
    .documents_list_index .letter_filter{position: absolute; font-size: 14px;right: -2px;text-align: center;width: 25px; top:45px;}
    .documents_list_index li{cursor: pointer; list-style: none; border-bottom: 0px;}

    .documents_panel_list_item_menuArrow{background-color: #00AAFF; width: 135px;height: 7px; margin-left: 55px;margin-top: 5px;display: none;}
    .documents_panel_list_item_menuArrow .documents_panel_list_item_menuArrow_arrowicon {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 3.5px 0 3.5px;
        border-color: #ffffff transparent transparent transparent;
    }
    .documents_panel_list_item_menulist {font-size: 12px;position: relative;right: auto;left: 0;}
    .documents_panel_list_item_menulist li .k-state-border-down { width: 135px;background-color: #00AAFF;}
    .documents_panel_list_item_menulist ul {width: 135px; right: auto;left: 0;position: relative;}
    .documents_panel_list_item_menulist li {width: 135px;}
    .documents_panel_list_item_menulist .k-link  .k-icon {margin-left: 45px;padding-top: 5px;height: 19px;width: 12px}

    .documents_panel_list_item_menulist_ul .k-animation-container {margin-top: -12px;}
    .documents_panel_list_item_menulist_ul .k-state-hover {background-color: #00AAFF;}
    .documents_panel_list_item_menulist_ul .k-state-hover span {color: #E6E6E6;}
    .documents_panel_list_item_menulist_ul .k-animation-container li {border-bottom: 2px solid #e6e6e6 !important;}
    .documents_panel_list_item_menulist_ul .k-animation-container li  span{margin-left: 5px;}

    #documents_document_details p{max-width: 165px;word-wrap:break-word;}

</style>

<div class="documents_panel" id="documents_panel">
    <div class="documents_panel_top wp_h_20 wp_fz_14">
        Documents
        <i id="documents_panel_resize_icon" class="main_common_f_13_13 documents_panel_resize right wp_mr_3 wp_mt_2 documents_click_able"></i>
    </div>
    <img id="documents_first_time_tooltip" src="imgs/beganDOC.png" style="display:none;z-index: 30; margin-left: 15px; position: absolute;">

    <div id="documents_panel_functions" class="wp_h_15 wp_mt_12 wp_mb_5 ">
        <div id="documents_menu_min" data-template="documents_menubar_min" data-bind="source:menuItems" class="wp_ml_25 wp_w_230"></div>
        <div id="documents_menu_max" data-template="documents_menubar_max" data-bind="source:menuItems"></div>
    </div>
    <div id="documents_panel_full_screen_loading" style="width: 100%; height: 100%;display: none;">
        <div style="width: 100%;height: 100%;background-color: #e6e6e6;display: table;">
            <div style="vertical-align: middle; text-align: center;display: table-cell;">
                <p>loading</p>
            </div>
        </div>
    </div>
    <div class="documents_panel_body">
        <div id="documents_body_min" data-alpa-name="documents_min_alpa_index" class="documents_list_index" style="background-color: inherit; width: 100%;height: 100%;"></div>
        <div id="documents_body_max_search" style="display: none;"></div>
        <div id="documents_body_max" style=" width: 100%;height: 100%;background-color: inherit;">
            <div id="documents_body_max_my_saved_files" data-alpa-name="documents_max_my_alph_index" class="documents_list_index wp_pl_25 wp_pr_2" style="background-color: inherit; width: 100%;height: 100%;"></div>
            <div id="documents_body_max_communities" data-alpa-name="documents_max_community_alph_index" class="documents_list_index wp_pl_25 wp_pr_2" style="display: none;background-color: inherit; width: 100%;height: 100%;"></div>
            <div id="documents_body_max_libraty_tools" style="display: none;background-color: inherit;"></div>
        </div>
    </div>
</div>

<script type="text/x-kendo-template" id="documents_menubar_min">
    <ul id="documents_menubar_min_list" style="display: none;" class="wp_fz_12 wp_h_14 wp_w_85 left">
        <li class="wp_w_85">
            <span id="documents_menubar_min_selected_item" style="background-color: \#CCCCCC;" class="wp_w_85">#: data[0] #</span>
        </li>
    </ul>
    <span class="wp_h_15 wp_w_77 left documents_click_able wp_fz_10" style="width:initial;text-align: center; background-color: \#CCCCCC;padding:1px;">My Documents</span>
    <i title="Search" class="main_common_j_11_11 wp_mt_2 wp_mr_10 documents_click_able right" onclick="documents_controller.onMinSearchButtonClicked()" id="documents_menubar_min_search_button"></i>
</script>

<script type="text/x-kendo-template" id="documents_menubar_max">
    <ul id="documents_menubar_max_list" class="wp_fz_12 wp_h_15 wp_w_350 wp_ml_25 left" style="list-style: none;">

                #for (var i = 0; i < data.length; i ++) {#
                #var word = data[i];#
                #if(i==0){#
                <li id="documents_menubar_max_list_item#:i#" style="width: 88px; text-align: center;background-color: \#CCCCCC" >#: word #</li>
                #}else if (i == 1){#
                <li id="documents_menubar_max_list_item#:i#" style="margin-left: 20px; width: 88px; text-align: center;background-color: \#7BD94C ">#: word #</li>
                #} else {#
        <li id="documents_menubar_max_list_item#:i#" style="margin-left: 80px; width: 88px; text-align: center;background-color: \#7BD94C ">#: word #</li>
        #}#
                #}#

    </ul>
    <ul style="list-style: none;" class="wp_fz_12 right">
        <li id="documents_menubar_search" class="right wp_mr_10"><i title="Search" class="main_common_j_11_11 wp_mt_2 documents_click_able" onclick="documents_controller.onMaxSearchButtonClicked()" id="documents_menubar_max_search_button"></i></li>
        <li id="documents_menubar_orderbyname" class="right wp_mr_20 documents_click_able" onclick="documents_controller.onOrderbyNameClicked(this);">Name<i id="documents_menubar_orderbyname_arrow_up" class="right wp_ml_3 wp_mt_3 right main_icon_e_6_8" style="display: block;"></i><i id="documents_menubar_orderbyname_arrow_down" class="right wp_ml_3 wp_mt_3 right main_icon_f_6_8" style="display: none;"></i>
        </li>
        <li id="documents_menubar_orderbytime" class="right wp_mr_20 documents_click_able" onclick="documents_controller.onOrderbyTimeClicked(this);">Time<i id="documents_menubar_orderbytime_arrow_up" class="right wp_ml_3 wp_mt_3 right main_icon_e_6_8"  style="display: block;"></i><i id="documents_menubar_orderbytime_arrow_down" class="right wp_ml_3 wp_mt_3 right main_icon_f_6_8" style="display: none;"></i>
        </li>
    </ul>
</script>

<div id="documents_panel_min_my_saved_files_div" class="wp_w_206" style="background-color: inherit; width: 100%;height: 100%;">
    <table id="documents_panel_min_table" class="wp_ml_25 wp_mt_1 wp_w_206"></table>
</div>
<script type="text/x-kendo-template" id="documents_panel_min_my_saved_files">
    #var mysavedfiles = data;#
        #if(mysavedfiles != undefined){#
            #for (var i = 0; i < mysavedfiles.length; i ++) {#
            <tr style="height: 60px;" class="documents_pane_min_list_item">
                <td class="" onclick="documents_controller.onMaxDocumentClicked(this)" onmouseover="documents_controller.onMaxDocumentMouseOver(this);" onmouseout="documents_controller.onMaxDocumentMouseOut(this);">
                    <div class="documents_doc_id" style="display: none;">#:mysavedfiles[i].DocumentId#</div>
                    <div class="documents_notif_id" style="display: none">#:mysavedfiles[i].NotificationId#</div>
                    <div class="documents_notif_tp" style="display: none;">#:mysavedfiles[i].NotificationType#</div>
                    <div class="documents_com_id" style="display: none;">#:mysavedfiles[i].CommunityID#</div>
                    #var type = mysavedfiles[i].FileType;#
                    #var html = documents_controller.getDocumentsIconWithType(type, true);#
                    <i class="#:html# documents_panel_min_list_image documents_click_able" id="doc_min_doc_i_#:mysavedfiles[i].DocumentId#"></i>
                    <p class="documents_panel_min_list_title text-overflow">
                        <span title="#:mysavedfiles[i].FileName#" class="documents_click_able" id="doc_min_doc_title_#:mysavedfiles[i].DocumentId#">#:mysavedfiles[i].FileName#</span>
                    </p>
                    #var timeStr = Workport.utils.calDays(mysavedfiles[i].CreatedDate,mysavedfiles[i].ServerDate);#
                    <p class="documents_panel_min_list_time text-overflow">
                        <span class="documents_click_able" id="doc_min_doc_time_#:mysavedfiles[i].DocumentId#">#:timeStr#</span>
                    </p>
                    <div id="doc_min_doc_arrow_#:mysavedfiles[i].DocumentId#" class="documents_panel_list_item_menuArrow documents_click_able">
                        <p style="position: relative; top: 8px; left: 63px;"><i class="documents_panel_list_item_menuArrow_arrowicon"></i></p>
                    </div>
                    <div id="doc_min_doc_menu_#:mysavedfiles[i].DocumentId#" class="documents_panel_list_item_menulist documents_click_able documents_click_able" style="margin-left: -5px;">
                        <ul class="documents_panel_list_item_menulist_ul wp_ml_60 wp_w_105" style="width:105px;display: none;float: none;">
                            <li><p></p><ul></ul></li>
                        </ul>
                    </div>
                </td>
            </tr>
            #}#
        #}#
</script>

<div id="documents_panel_max_my_saved_files_div" style="background-color: inherit; width: 100%;height: 100%;">
    <table class="wp_mt_1" id="documents_panel_max_table" style="width: 720px;"></table>
</div>
<script type="text/x-kendo-template" id="documents_panel_max_my_saved_files">
    #var mysavedfiles = data;#
    #var isExport = data.Export ? 'export_':'';#
    #if(mysavedfiles != undefined){#
        #var maxY = parseInt((mysavedfiles.length-1) / 3) + 1;#
        #for (var y = 0; y < maxY; y ++) {#
            <tr style="height: 60px;" class="documents_pane_max_list_item">
            #for (var x = 0; x < 3; x ++) {#
                #var i = y * 3 + x;#
                #if (i >= mysavedfiles.length) {#
                #break;#
                #}#
                <td class="documents_panel_list_item_three" onclick="documents_controller.onMaxDocumentClicked(this);" onmouseover="documents_controller.onMaxDocumentMouseOver(this);" onmouseout="documents_controller.onMaxDocumentMouseOut(this);">
                    <div class="documents_doc_id" style="display: none;">#:mysavedfiles[i].DocumentId#</div>
                    <div class="documents_notif_id" style="display: none">#:mysavedfiles[i].NotificationId#</div>
                    <div class="documents_notif_tp" style="display: none;">#:mysavedfiles[i].NotificationType#</div>
                    <div class="documents_com_id" style="display: none;">#:mysavedfiles[i].CommunityID#</div>
                    #var type = mysavedfiles[i].FileType;#
                    #var html = documents_controller.getDocumentsIconWithType(type, true);#
                    <i id="#:isExport#doc_max_my_i_#:mysavedfiles[i].DocumentId#" class="#:html# documents_panel_list_item_three_image documents_click_able"></i>
                    <p class="documents_panel_list_item_three_title text-overflow" >
                        <span id="#:isExport#doc_max_my_name_#:mysavedfiles[i].DocumentId#" title="#:mysavedfiles[i].FileName#" class="documents_click_able">#:mysavedfiles[i].FileName#</span>
                    </p>
                    #var timeStr = Workport.utils.calDays(mysavedfiles[i].CreatedDate,mysavedfiles[i].ServerDate);#
                    <p class="documents_panel_list_item_three_time text-overflow">
                        <span id="#:isExport#doc_max_my_time_#:mysavedfiles[i].DocumentId#" class="documents_click_able">#:timeStr#</span>
                    </p>
                    <div id="#:isExport#doc_max_my_arrow_#:mysavedfiles[i].DocumentId#" class="documents_panel_list_item_menuArrow documents_click_able">
                        <p style="position: relative; top: 8px; left: 63px;"><i class="documents_panel_list_item_menuArrow_arrowicon"></i></p>
                    </div>
                    <div id="#:isExport#doc_max_my_menu_#:mysavedfiles[i].DocumentId#" class="documents_panel_list_item_menulist documents_click_able documents_click_able" style="margin-left: -5px;">
                        <ul class="documents_panel_list_item_menulist_ul wp_ml_60 wp_w_105" style="display: none;float: none;">
                            <li><p></p><ul></ul></li>
                        </ul>
                    </div>
                </td>
            #}#
            </tr>
        #}#
    #}#
</script>

<div id="documents_panel_max_communities_div" style="background-color: inherit; width: 100%;height: 100%;">
    <div id="documents_panel_max_communities_list" class="wp_mt_1"></div>
</div>
<script type="text/x-kendo-template" id="documents_panel_max_communities">
    #for (var indexCommunity = 0; indexCommunity < data.length; indexCommunity ++) {#
        #var communityID = data[indexCommunity].CommunityId;#
        #var fileCount =  parseInt(data[indexCommunity].TotalFileCount);#
        <table class="documents_pane_max_list_item">
            <tr>
                <td class="">
                    <div class="documents_com_id" style="display: none;">#:communityID#</div>
                    <img id="doc_max_com_com_i_#:communityID#" src="#:data[indexCommunity].CommunityImageUrl#" onerror="onDefaultThumbnailWanted(this,'C');" class="documents_max_communities_list_item_thumbnail documents_click_able" onclick="documents_controller.onMaxCommunityClicked(this);">
                    <p id="doc_max_com_com_title_#:communityID#" style="max-width: 650px;" class="documents_max_communities_list_item_communityname text-overflow"><span class="documents_click_able" title="#:data[indexCommunity].CommunityName#" onclick="documents_controller.onMaxCommunityClicked(this);">#:data[indexCommunity].CommunityName#</span></p>
                    #var localDate = documents_controller.getTimeByLocalTimeZone(data[indexCommunity].ServerDate);#
                    <div style="display: none;" class="documents_max_communities_list_item_time">#:localDate#</div>
                    #var fcStr = data[indexCommunity].TotalFileCount + " file(s)" #
                    <div class="documents_max_communities_list_item_filecount">#:fcStr#</div>
                </td>
            </tr>
        </table>
        #if (fileCount > 0) {#
        <div class="documents_max_communities_list_item">
            <table id="documents_max_communities_list_#:communityID#"></table>
        </div>
        #}#

        # if (fileCount > 1) {#
        <div class="documents_max_communities_list_item_moreorless">
            <p id="documents_view_more_#:communityID#" class="right documents_click_able documents_view_more wp_mr_35" onclick="documents_max_Community_ScrollViewController.viewMore(this, #:communityID#)">
            #if(data[indexCommunity].TotalFileCount > 4){#
                View More
            #}else{#
                &nbsp;
            #}#
           </p>
            <p id="documents_retract_#:communityID#" class="right documents_click_able documents_retract wp_mr_35" onclick="documents_max_Community_ScrollViewController.retract(this,'documents_max_communities_list_#:communityID#')" style="display: none;">
                Collapse
            </p>
        </div>
        #}#
        <hr style="width: 100%; top: 5px; position: relative; border: 0; height: 2px; background-color: \#D9D9D9;" noshade="noshade">
    #}#
</script>
<script type="text/x-kendo-template" id="documents_panel_max_communities_table_documents_body">
    <tbody>
    #var docCount =  parseInt(data.FileBasicDetails.length);#
    #yy = parseInt((docCount-1) / 4) + 1;#
    #for (var y = 0; y < yy ; y ++) {#
    <tr class="documents_pane_max_list_item #if (y!=0) {#
    documents_pane_max_list_item_not_first" style="display: none;
    #}#">

        #for (var x = 0; x < 4; x ++) {#
        #var i = y * 4 + x;#
        #if (i >= docCount) {#
        #break;#
        #}#
        #if (data.FileBasicDetails[i]) {#
        <td class="documents_panel_list_item_four" onclick="documents_controller.onMaxDocumentClicked(this)" onmouseover="documents_controller.onMaxDocumentMouseOver(this);" onmouseout="documents_controller.onMaxDocumentMouseOut(this);">
            <div class="documents_doc_id" style="display: none;">#:data.FileBasicDetails[i].DocumentId#</div>
            <div class="documents_notif_id" style="display: none">#:data.FileBasicDetails[i].NotificationId#</div>
            <div class="documents_notif_tp" style="display: none;">#:data.FileBasicDetails[i].NotificationType#</div>
            <div class="documents_com_id" style="display: none;">#:data.FileBasicDetails[i].CommunityID#</div>
            #var type = data.FileBasicDetails[i].FileType;#
            #var html =  documents_controller.getDocumentsIconWithType(type, false);#
            <i id="doc_max_com_doc_i_#:data.FileBasicDetails[i].DocumentId#" class="#:html# documents_panel_list_item_four_image documents_click_able"></i>
            <div class="left" style="vertical-align: top;">
                <p class="documents_panel_list_item_four_title text-overflow" >
                    <span id="doc_max_com_doc_title_#:data.FileBasicDetails[i].DocumentId#" title="#:data.FileBasicDetails[i].FileName#" class="documents_click_able">#:data.FileBasicDetails[i].FileName#</span>
                </p>
                #var timeStr = Workport.utils.calDays(data.FileBasicDetails[i].CreatedDate,data.ServerDate);#
                <p class="documents_panel_list_item_four_time text-overflow">
                    <span id="doc_max_com_doc_time_#:data.FileBasicDetails[i].DocumentId#" class="documents_click_able">#:timeStr#</span>
                </p>
                <p class="documents_panel_list_item_four_author text-overflow">
                    <span id="doc_max_com_doc_author_#:data.FileBasicDetails[i].DocumentId#" title="#:data.FileBasicDetails[i].CreatedBy#" class="documents_click_able">#:data.FileBasicDetails[i].CreatedBy#</span>
                </p>
                <div id="doc_max_com_doc_arrow_#:data.FileBasicDetails[i].DocumentId#" class="documents_panel_list_item_menuArrow documents_click_able" style="margin-left: 15px;">
                    <p style="position: relative; top: 8px; left: 63px;"><i class="documents_panel_list_item_menuArrow_arrowicon"></i></p>
                </div>
            </div>
            <div id="doc_max_com_doc_menu_#:data.FileBasicDetails[i].DocumentId#" class="documents_panel_list_item_menulist documents_click_able documents_click_able">
                <ul class="documents_panel_list_item_menulist_ul wp_ml_35 wp_w_105" style="display: none;float: none;">
                    <li><p></p><ul></ul></li>
                </ul>
            </div>
        </td>
        #}#
        #}#
    </tr>
    #}#
    </tbody>
</script>

<div id="documents_panel_max_library_tools_div" style="background-color: inherit; width: 100%;height: 100%;">
    <div data-template="documents_panel_max_library_tools" data-bind="source:data_LibraryTools"></div>
</div>
<script type="text/x-kendo-template" id="documents_panel_max_library_tools">

</script>

<div id="documents_panel_max_search" style="background-color: inherit; width: 100%;height: 100%;">
    <table id="documents_search_menu" class="wp_fz_12"></table>
    <div id="documents_search_result_table_div" style="background-color: inherit;width: 100%;height: 100%;">
        <table id="documents_search_result_table"></table>
    </div>
</div>
<script type="text/x-kendo-template" id="documents_panel_max_search_table">
    <tr><td class="left">
        <div class="wp_w_768 wp_h_30 wp_mt_15 ss_border_2">
            <div style="margin-left:25px;">
                <span>Keywords</span>
                <span class="k-textbox wp_searchbar">
                    <input id="documents_search_keywords" type="text" maxlength="2000" oninput="if($(this).data('kendoTooltip')){$(this).data('kendoTooltip').hide();}" onkeypress="if (event.keyCode == 13) {documents_max_Search_ScrollViewController.doSearch();}" />
                    <i class="k-icon k-i-search"  title="Search" id="documents_panel_max_search_table_button" onclick="documents_max_Search_ScrollViewController.doSearch()">&nbsp;</i>
                </span>
            </div>
            <input id="documents_search_communities" style="display: none;" class="left wp_ml_10 wp_h_20 wp_w_125" onclick=""/>
            <span class="left wp_ml_20 wp_mt_3 wp_fz_12" style="display: none;">Time</span>
            <input id="documents_search_time_from" style="display: none;" class="left wp_ml_5 wp_h_20 wp_w_72"/>
            <span class="left wp_ml_5 wp_mt_3 wp_fz_12" style="display: none;">to</span>
            <input id="documents_search_time_to" class="left wp_ml_5 wp_h_20 wp_w_72" style="display: none;"/>
            <p class="right wp_mr_25 wp_fz_12 wp_w_50 wp_h_20 documents_click_able" onclick="documents_max_Search_ScrollViewController.doSearch();" style="display: none; color: \#FFFFFF; background-color: \#00AAFF; text-align: center; padding-top: 2px;">Search</p>
        </div>
    </td></tr>
    <tr><td>
            <hr style="background-color: \#D9D9D9; border: 0; height: 2px;" noshade="noshade"></th>
    </td></tr>
    <tr><td>
        #var docCount = data.length;#
        #if (docCount >= 0 && keyword) {#
        <p class="documents_click_able wp_ml_25 wp_fz_12 left documents_click_able" id="documents_search_backtoall_button" onclick="documents_controller.onBackToAllFromSearchClicked();" style="color: \#4BB3FC">Back to all </p>
        <p id="documents_search_result_count" class="left wp_fz_12" style="word-break: break-all;"> &nbsp;>&nbsp;Showing&nbsp; #:docCount# result(s) for #:keyword#</p>
        #}#
    </td></tr>
</script>
<script type="text/x-kendo-template" id="documents_panel_max_search_table_content">
    #var docCount = data.length;#
    #yy = parseInt((docCount-1) / 4) + 1;#
    #if (docCount == 0) {#
        #yy = 0;#
        <p style="font-size: 12px; text-align: center;width: 768px;margin-top: 25px;">No results for <span style="color: \#ff0000;word-break: break-all;">#:data.keyword#</span>.</p>
    #}#
    #for (var y = 0; y < yy ; y ++) {#
    <tr class="documents_pane_max_list_item">
        <td style="width: 25px;"></td>
        #for (var x = 0; x < 4; x ++) {#
        #var i = y * 4 + x;#
        #if (i >= docCount) {#
        #break;#
        #}#
        <td class="documents_panel_list_item_four"  onmouseout="documents_controller.onMaxDocumentMouseOut(this);">
            <div class="documents_doc_id" style="display: none;">#:data[i].DocumentId#</div>
            <div class="documents_notif_id" style="display: none">#:data[i].NotificationId#</div>
            <div class="documents_notif_tp" style="display: none;">#:data[i].NotificationType#</div>
            <div class="documents_com_id" style="display: none;">#:data[i].CommunityID#</div>
            #var type = data[i].FileType;#
            #var html = documents_controller.getDocumentsIconWithType(type, false);#
            <i id="doc_max_search_i_#:data[i].DocumentId#" class="#:html# documents_panel_list_item_four_image documents_click_able"></i>
            <div class="left documents_search_content" style="vertical-align: top;">
                <p class="documents_panel_list_item_four_title text-overflow">
                    <span id="doc_max_search_title_#:data[i].DocumentId#" title="#:data[i].FileName#" class="documents_click_able">#:data[i].FileName#</span>
                </p>
                #var timeStr = Workport.utils.calDays(data[i].CreatedDate,data[i].ServerDate);#
                <p class="documents_panel_list_item_four_time text-overflow">
                    <span id="doc_max_search_time_#:data[i].DocumentId#" class="documents_click_able">#:timeStr#</span>
                </p>
                #if (data.renderType) {#
                <p class="documents_panel_list_item_four_author text-overflow">
                    <span id="doc_max_search_author_#:data[i].DocumentId#" title="#:data[i].CreatedBy#" class="documents_click_able">#:data[i].CreatedBy#</span>
                </p>
                #}#
                <div id="doc_max_search_arrow_#:data[i].DocumentId#" class="documents_panel_list_item_menuArrow documents_click_able" style="margin-left: 15px;">
                    <p style="position: relative; top: 8px; left: 63px;"><i class="documents_panel_list_item_menuArrow_arrowicon"></i></p>
                </div>
            </div>
            <div id="doc_max_search_menu_#:data[i].DocumentId#" class="documents_panel_list_item_menulist documents_click_able documents_click_able">
                <ul class="documents_panel_list_item_menulist_ul wp_ml_35 wp_w_105" style="display: none;float: none;">
                    <li><p></p><ul></ul></li>
                </ul>
            </div>
        </td>
        #}#
    </tr>
    #}#
</script>

<div id="documents_community_details_windows">
    <div id="documents_community_details">
        <table>
            <tbody style="vertical-align:top;">
            <tr data-template="documents_community_details_tr_one_content" data-bind="source:data_CommunityDetail"></tr>
            <th colspan="2"><hr style="background-color: #F2F2F2; border: 0; height: 2px;" noshade="noshade"></th>
            <tr data-template="documents_community_details_tr_two_content" data-bind="source:data_CommunityDetail"></tr>
            </tbody>
        </table>
    </div>
</div>
<script type="text/x-kendo-template" id="documents_community_details_tr_one_content">
    #if (data.CommunityName) {#
    <td style="width: 55px;">
        <img src="#:data.CommunityImageUrl#" style="width: 40px; height: 40px;">
    </td>

    <td style="font-size: 10px;">
        <p id="documents_community_detail_win_community_name" style="font-size: 12px;">#:data.CommunityName#</p>
        <p id="documents_community_detail_win_date" style="font-size: 9px;">#:data.ServerDate#</p>
        <p id="documents_community_detail_win_community_description">Description</p>
        <p id="documents_community_detail_win_tags">Tags</p>
        <p id="documents_community_detail_win_apps">Apps</p>
    </td>
    #}#
</script>
<script type="text/x-kendo-template" id="documents_community_details_tr_two_content">
    <td></td>
    <td>
        <table style="font-size: 10px;">
            <tbody>
                <tr style="height: 18px; vertical-align: top;"><td style="width: 150px;">Moderators</td></tr>
                <tr>
                    <td >
                    <div style="width: 200px; height: 50px;">
                        <img src="imgs/topbar/headPortrait3_20x20_03.png" style="width: 40px; height: 40px;">
                        <div style="left: 55px; top: -45px; position: relative;">
                            <p>Jun Ahang</p>
                            <p>123-456-789</p>
                            <p>a@b.c</p>
                        </div>
                    </div>
                    </td>
                </tr>
                <tr style="height: 36px; vertical-align: top;"><td><a>Request to be Moderator</a></td></tr>
                <tr style="height: 18px; vertical-align: top;"><td>Members</td></tr>
                #for (y = 0; y < 20; y ++) {#
                <tr>
                    # for (x = 0; x < 3; x ++) {#
                    <td >
                        <div style="width: 200px; height: 50px;">
                            <img src="imgs/topbar/headPortrait3_20x20_03.png" style="width: 40px; height: 40px;">
                            <div style="left: 51px; top: -45px; position: relative;">
                                <p>Jun Ahang #:y#:#:x#</p>
                                <p>Senior Economist</p>
                                <p>a@b.c</p>
                            </div>
                        </div>
                    </td>
                    #}#
                </tr>
                #}#
            </tbody>
        </table>
    </td>
</script>


<div id="documents_document_details_windows">
    <div id="documents_document_details" class="wp_fz_12">
        <table data-template="documents_document_details_table" data-bind="source:data_DocumentDetail"></table>
    </div>
</div>
<script type="text/x-kendo-template" id="documents_document_details_table">
    <tbody style="vertical-align: top;">
    #if (data.FileType != undefined) {#
    <tr><td width="8px"></td> <td width="30px"></td> <td width="40px"></td> <td width="175px"></td></tr>
    <tr style="height: 30px;">
        <td rowspan="10"></td>
        <td>
            #var type = data.FileType;#
            #var html = documents_controller.getDocumentsIconWithType(type, false);#
            <i class="#:html#"></i>
        </td>
        <td colspan="2"><p id="documents_document_details_filename" style="max-width: 210px;" class="text-overflow" title="#:FileName#">#:FileName#</p></td>
     </tr>
    #if (data.LikedUsersDetails) {#
    #if (data.LikedUsersDetails.length > 0) {#
    <tr>
        <td colspan="3">
                #var showString = data.LikedUsersDetails[0].UserName#
                #var likedIndex = 1;#
                #for (likedIndex = 1; likedIndex < data.LikedUsersDetails.length && likedIndex < 3; likedIndex ++) {#
                #var showStr = ', ' + data.LikedUsersDetails[likedIndex].UserName;#
                #showString += showStr;#
                #}#
                #var restCount = data.LikedUsersDetails.length - likedIndex;#
                #if (restCount > 1) {#
                #var showStr2 = ' and ' + restCount + ' others';#
                #showString += showStr2;#
                #} else if (restCount > 0) {#
                #var showStr2 = ' and ' + restCount + ' other';#
                #showString += showStr2;#
                #}#
            <p class="left"><i class="main_smartstream_w_8_8 left wp_mt_4 wp_mr_2"></i>#:showString#</p>
        </td>
    </tr>
    #}}#
    <tr>
        <td colspan="2"><p>Modified on</p></td>
        #var localDate = documents_controller.getTimeByLocalTimeZone(LastModifiedDate);#
        <td colspan="1"><p id="documents_document_details_localdate">#:localDate#</p></td>
    </tr>
    <tr>
        <td colspan="2"><p>Modified by</p></td>
        <td colspan="1"><p id="documents_document_details_modifiedby">#:ModifiedBy#</p></td>
    </tr>
    <tr>
        <td colspan="2"><p>Remarks</p></td>
        <td colspan="1"><p id="documents_document_details_remarks">#:Remarks#</p></td>
    </tr>
    <tr>
        <td colspan="2"><p>Tags</p></td>
        <td colspan="1"><p id="documents_document_details_tags">#:Tags#</p></td>
    </tr>
    <tr>
        <td colspan="2"><p>Description</p></td>
        <td colspan="1"><p id="documents_document_details_description">#:Description#</p></td>
    </tr>
    <tr style="height: 10px"></tr>
    #}#
    </tbody>
</script>

<div id="documents_document_version_details_window" class="wp_fz_12">
    <table data-template="documents_document_version_details_table" data-bind="source:data_DocumentDetail"></table>
</div>
<script type="text/x-kendo-template" id="documents_document_version_details_table">
    <tbody style="vertical-align: top;">
    <tr><td width="9px"></td> <td width="30px"></td> <td width="35px"></td> <td width="40px"></td> <td></td></tr>
#if (data.versions != undefined) {#
    <tr style="height: 20px;">
        <td></td>
        <td>
            #var type = data.FileType;#
            #var html = documents_controller.getDocumentsIconWithType(type, false);#
            <i class="#:html#"></i>
        </td>
        <td colspan="3" style="vertical-align: middle;">
            <p id="documents_document_version_details_filename" style="max-width: 195px;" title="#:data.FileName#" class="text-overflow">
                #:data.FileName#
            </p>
        </td>
    </tr>
    <tr style="height: 10px;"></tr>
    #for (var i = 0; i < data.versions.length; i ++) {#
    #var versionData = data.versions[i], n = i;#
    <tr>
        <td rowspan="5"></td>
        <td colspan="3"><p style="margin-top: -4px;">#:versionData.Version#</p></td>
    </tr>
    <tr style="height: 25px;">
        <td colspan="3">
            <p class="wp_fz_10 wp_w_102 wp_h_17 documents_click_able" style="color: \#FFFFFF; background-color: \#7BD94C; text-align: center; vertical-align: middle;" >
                <a id="documents_version_window_open_download_button_#:i#" style="vertical-align: middle;font-size: 12px;" onclick="window.open('#:versionData.DocumentUrl#');">Open & Download</a>
            </p>
        </td>
        <td colspan="1">
            #if (data.EnableCheckout == true || data.EnableCheckin == true) {#
            #if (i < data.versions.length-1) {#
                <p class="wp_fz_10 wp_w_117 wp_h_17 documents_click_able" style="color: \#FFFFFF; background-color: \#00AAFF; text-align: center; vertical-align: middle;">
                <a id="documents_version_window_restore_button_#:i#" onclick="documents_controller.onRestoreVersionClicked(this, '#:versionData.Version#');" style="vertical-align: middle;font-size: 12px;">Restore This Version</a>
                </p>
            #}}#
        </td>
    </tr>
    <tr>
        <td colspan="2"><p>Modified on</p></td>
        #var localDate = documents_controller.getTimeByLocalTimeZone(versionData.ModifiedDate);#
        <td colspan="2"><p id="documents_version_window_modified_on_#:i#" style="max-width: 160px;word-wrap: break-word;">#:localDate#</p></td>
    </tr>
    <tr>
        <td colspan="2"><p>Modified by</p></td>
        <td colspan="2"><p id="documents_version_window_modified_by_#:i#" style="max-width: 160px;word-wrap: break-word;">#:versionData.ModifiedBy#</p></td>
    </tr>
    <tr>
        <td colspan="2"><p>Remarks</p></td>
        <td colspan="2"><p id="documents_version_window_remarks_#:i#"style="max-width: 160px;word-wrap: break-word;">#:versionData.Remarks#</p></td>
    </tr>
    <tr style="height: 10px;"></tr>
    #}}#
    </tbody>
</script>

<div id="documents_document_checkin_window" class="wp_fz_12">
    <table class="wp_ml_15">
        <tr>
            <td><p class="wp_mt_5">Upload New Version</p></td>
        </tr>
        <tr>
            <td>
                <!--
                <input onclick="$(this).select();" class="left wp_w_175 wp_mt_5 wp_h_20">
                <p class="wp_w_40 wp_mt_5 wp_h_20 wp_ml_10 left documents_click_able" onclick="documents_controller.onBrowseClicked(this);" style="color: #FFFFFF; background-color: #7BD94C; text-align: center; margin-top:8px;vertical-align:middle;font-size: 11px">
                    Browse
                </p>-->
                <input id="documents_select_file_name" type="text" style="position:absolute;line-height:18px;" class="wp_fz_12 wp_mt_12 wp_w_175" disabled="true"/>
                <table id="documents_select_file_table" class="wp_mt_10">
                    <tr id="documents_select_file" class='wp_h_20'>
                        <td class="left wp_w_225">
                            <input type="file" name="files" id="documents_select_file_field" autocomplete="off" onclick="documents_controller.onBrowseClicked(this);"/>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td><p class="left wp_mt_10">Remarks</p> <sup class="left wp_mt_10" style="color: #ff0000">*</sup></td>
        </tr>
        <tr>
            <td>
                <textarea id="documents_select_file_remarks" class="left wp_w_225 wp_h_60" maxlength="255" style="border-radius:2px;border: 1px #AFAFAF solid; vertical-align: top;word-wrap:break-word;font-size: 12px;"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <input class="wp_mt_8 left" type="radio" value="major" checked="checked" name="upload_type"/>
                <p class="left wp_mt_7">Major</p>
                <input class="wp_mt_8 wp_ml_22 left" type="radio" value="minor" name="upload_type"/>
                <p class="left wp_mt_7">Minor</p>
            </td>
        </tr>
        <tr>
            <td>
                <button type="button" class="k-button wp_w_50 wp_h_18 right wp_fz_11 documents_click_able" id="documents_checkin_window_upload_button" onclick="documents_controller.onUploadClicked(this);" style="color: #FFFFFF; background-color: #00AAFF;">
                    Upload
                </button>
            </td>
        </tr>
    </table>
</div>
<div id="documents_document_copy_window" class="wp_fz_12">
    <table class="wp_ml_15">
        <tr>
            <td colspan="2">
                <p>Copy Seleted Item</p>
            </td>
        </tr>
        <tr>
            <td>
                <input id="documents_copy_window_input" class="left wp_w_180 wp_h_20" oninput="documents_controller.onCopyInputChanged();" onclick="" onload="$(this).select();">
            </td>
            <td>
                <button type="button" id="documents_copy_window_copy_button" onclick="documents_controller.onCopyClicked(this);"  class="k-button wp_w_35 wp_ml_10 wp_h_20 right documents_click_able" style="color: #FFFFFF; background-color: #00AAFF;">
                    Copy
                </button>
            </td>
        </tr>
    </table>
    <div id="documents_copy_window_candidate_area" class="wp_ml_18" style="background-color: #E6E6E6">
        <ul style="list-style: none;" class="wp_w_180 wp_h_110" data-template="documents_document_copy_candidate_list" data-bind="source:data_CopyCandidate"></ul>
    </div>
</div>

<script type="text/x-kendo-template" id="documents_document_copy_candidate_list">
    #for (var i = 0; i < data.length; i ++) {#
    <li id="documents_copy_candidate_#:data[i].ID#" title="#:data[i].Name#" onclick="documents_controller.onCopyCandidateClicked(this);">
        <p class="documents_copy_candidate_id" style="display: none">#:data[i].ID#</p>
        <p class="documents_copy_candidate_name wp_w_180 wp_h_20 text-overflow">#:data[i].Name#</p>
    </li>
    #}#
</script>

<script type="text/x-kendo-template" id="documents_noresult_template">
    <div style="font-size: 14px; color: \#ffffff; text-align: center; color: \#595959;">
        #if(!keyword){#
            #if(grouptype == "Documents"){#
                You have not uploaded any Documents yet
            #}else{#
                There are no Documents available
            #}#
        #}else{#
            No #: grouptype# beginning with #: keyword#
        #}#
    </div>
</script>

<script type="text/javascript">
    var documentSelectedFileNames;
    //select file
    $("#documents_select_file_field").kendoUpload({
        localization: {
            select: "Browse"
        },
        select: function(e) {
            var fileType;
            var alertMessage;
            var file = e.files[0];
            $('#documents_select_file_name').val('');

            if ($(".k-state-focused input:first").is(':hidden')) {
                $(".k-state-focused input:first").remove();
            }

            if ($("#documents_select_file ul li:last").is(':hidden')) {
                $("#documents_select_file ul li:last").remove();
            }
            // Check file size < 50MB
            if (file.size > (50 * 1024 * 1024)) {
                fileType == 0 ? alertMessage = "The size of the image must be within <50 MB>." : alertMessage = "The size of the attachment must be within <50 MB> .";
                Workport.utils.alertMsg("", alertMessage, function(_data){});
                return;
            }

            var specialChar = ["#", "%", "&", "*", ":", "<", ">", "?", "/", "{", "|", "}", "\\", "~", "\""]
            for (var i = 0; i < specialChar.length; i++) {
                if (file.name.indexOf(specialChar[i]) > -1) {
                    Workport.utils.alertMsg("", "The attachment name cannot contain any of the following special characters: '\\ ~ # % & * : \" < > ? / { | }'. Please rename and try again.", function(_data){});
                    return;
                }
            }
            // Check same file name
            if (!documentSelectedFileNames) {
                documentSelectedFileNames = new Array();
            } else {
                if ($.inArray(file.name, documentSelectedFileNames) > -1) {
                    Workport.utils.alertMsg("", "An attachment with the same name already exists. Please rename the attachment and try again.", function(_data){});
                    return;
                }
            }
            $('#documents_select_file_name').val(file.name);
            var documentFileReader = new FileReader();
            documentFileReader.readAsDataURL(e.files[0].rawFile);
            documentFileReader.onload = function(e) {
                documents_view_model.documentSelectedFileContents.push(e.target.result.replace(/^.*?,/, ''));
            }
        },
        remove: function(e) {
            for (var i = 0; i < documents_view_model.documentSelectedFile.length; i++ ) {
                if (documents_view_model.documentSelectedFile[i].name == e.files[0].name) {
                    documents_view_model.documentSelectedFile.splice(i, 1);
                    documents_view_model.documentSelectedFileContents.splice(i, 1);
                    documentSelectedFileNames.splice(i, 1);
                    break;
                }
            }

            //button enabled
            if ($("#documents_select_file div:eq(1)").hasClass("k-upload-button-disable")) {
                $("#documents_select_file input:file:first").css("cursor","pointer");
                $('#documents_select_file').find('input:file:last').prop('disabled', false);//Browse button enable
                $("#documents_select_file div:eq(1)").removeClass("k-upload-button-disable");//browse button enable
            }

            if (documents_view_model.documentSelectedFile.length == 0) {
                $("#documents_select_file ul").css("display", 'none');
            }
        }
    });
</script>
<script src="js/doc.api.js"></script>
<script src="js/documents.main.js"></script>